<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title></title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">


	</head>
	<body>
<!--		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">-->
<!--		  &lt;!&ndash; Indicators &ndash;&gt;-->
<!--		  <ol class="carousel-indicators">-->
<!--		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>-->
<!--		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>-->
<!--		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>-->
<!--		  </ol>-->
<!--		-->
<!--		  &lt;!&ndash; Wrapper for slides &ndash;&gt;-->
<!--		  <div class="carousel-inner" role="listbox">-->
<!--		    <div class="item active">-->
<!--		      <img src="images/1.jpg" alt="...">-->
<!--		      <div class="carousel-caption">-->
<!--		        ...-->
<!--		      </div>-->
<!--		    </div>-->
<!--		    <div class="item">-->
<!--		      <img src="images/2.jpg" alt="...">-->
<!--		      <div class="carousel-caption">-->
<!--		        ...-->
<!--		      </div>-->
<!--		    </div>-->
<!--		    ...-->
<!--			<div class="item">-->
<!--			  <img src="images/3.jpg" alt="...">-->
<!--			  <div class="carousel-caption">-->
<!--			    ...-->
<!--			  </div>-->
<!--			</div>-->
<!--		  </div>-->
<!--		-->
<!--		  &lt;!&ndash; Controls &ndash;&gt;-->
<!--		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
<!--		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
<!--		    <span class="sr-only">Previous</span>-->
<!--		  </a>-->
<!--		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
<!--		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
<!--		    <span class="sr-only">Next</span>-->
<!--		  </a>-->
<!--		</div>-->

<!--		<script src="jquery/jquery-3.4.1.min.js"></script>-->
<!--		<script src="bootstrap/js/bootstrap.js"></script>-->
<div class="row">
	<div class="col-sm-6" id="myChart1" style="height: 250px;width: 50%;"></div>
	<div class="col-sm-6" id="myChart2" style="height: 250px;width: 50%;"></div>
</div>
<div class="row">
	<div class="col-sm-6" id="myChart3" style="height: 250px;width: 50%;"></div>
	<div class="col-sm-6" id="myChart4" style="height: 250px;width: 50%"></div>
</div>
<script src="../jquery/jquery-3.4.1.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap-treeview/bootstrap-treeview.min.js"></script>
<script src="../bootstrap-table/bootstrap-table.min.js"></script>
<script src="../echarts/echarts.min.js"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	$(document).ready(function () {
		$.ajax({
			url: "saleList",
			type: "post",
			dataType: "json",
			success: function (result) {
				// alert(JSON.stringify(result));
				//[{"s_id":1,"s_bookid":1,"s_sum_count":3,"s_sum_price":271.2,"b_name":"java入门"},{"s_id":2,"s_bookid":2,"s_sum_count":5,"s_sum_price":200,"b_name":"oracle基础"},{"s_id":3,"s_bookid":3,"s_sum_count":1,"s_sum_price":25,"b_name":"软件测试"},{"s_id":6,"s_bookid":4,"s_sum_count":1,"s_sum_price":50,"b_name":"javaweb基础"},{"s_id":7,"s_bookid":5,"s_sum_count":3,"s_sum_price":451.5,"b_name":"SpringBoot基础"},{"s_id":8,"s_bookid":8,"s_sum_count":1,"s_sum_price":35.5,"b_name":"MyBatis基础"}]
				//数据源是一个二维数据，二维数据的第一个元素是横轴信息
				//从二个元素开始，是图片要加载的数据
				var source = [];
				var source1 = [];
				source[0] = [];
				source[0][0] = "test";
				source[0][1] = "销售量";
				for (var i = 0; i < result.length; i++) {
					source[i + 1] = [];
					source[i + 1][0] = result[i].type;
					source[i + 1][1] = result[i].num;

				}
				source1[0] = [];
				source1[0][0] = "test";
				source1[0][1] = "销售量";
				source1[0][2] = "销售额";
				for (var i = 0; i < result.length; i++) {
					source1[i + 1] = [];
					source1[i + 1][0] = result[i].type;
					source1[i + 1][1] = result[i].num;
					source1[i + 1][2] = result[i].money;
				}
				initChart1(source);
				initChart2(source);
				initChart3(source);
				initChart4(source1);
			}
		});


		function initChart1(source) {
			var myChart1 = echarts.init($("#myChart1").get(0));
			// alert("source="+source);
			var option = {
				legend: {
					// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
					orient: 'vertical',
					// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
					x: '450',
					// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
					y: 'center',
					itemWidth: 24,   // 设置图例图形的宽
					itemHeight: 10,  // 设置图例图形的高
					textStyle: {
						color: '#666'  // 图例文字颜色
					},
					// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
					itemGap: 10,
					// backgroundColor: '#eee',  // 设置整个图例区域背景颜色

				},

				title: {
					text: '销售量'
				},
				tooltip: {show: false},
				dataset: {
					// 提供一份数据。
					source: source
				},
				// color: ['#ff0000', '#ffff00', '#00ffff', '#ff00ff', '#00ff00', '#0000ff'],
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				//饼图不用设x轴和y轴
				// xAxis: {type: 'category'},
				// 声明一个 Y 轴，数值轴。
				// yAxis: {},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				series: [

					{type: 'pie'}
				]
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart1.setOption(option);
		}


		function initChart2(source) {
			var myChart2 = echarts.init($("#myChart2").get(0));
			// alert("source="+source);
			var option = {
				//legend为空，会自动从数据源的第一行读取标志信息
				legend: {},
				title: {
					text: '销售量'
				},
				tooltip: {},
				dataset: {
					// 提供一份数据。
					source: source
				},
				// dataset: {
				//     source: [
				//         ['product', '2015', '2016', '2017'],
				//         ['Matcha Latte', 43.3, 85.8, 93.7],
				//         ['Milk Tea', 83.1, 73.4, 55.1],
				//         ['Cheese Cocoa', 86.4, 65.2, 82.5],
				//         ['Walnut Brownie', 72.4, 53.9, 39.1]
				//     ]
				// },

				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				title: {
					text: '销量示意图'
				},
				// itemStyle: {
				//     // 阴影的大小
				//     shadowBlur: 60,
				//     // 阴影水平方向上的偏移
				//     shadowOffsetX: 0,
				//     // 阴影垂直方向上的偏移
				//     shadowOffsetY: 0,
				//     // 阴影颜色
				//     shadowColor: 'rgba(0, 0, 0, 0.1)'
				// },
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				xAxis: {type: 'category'},
				// 声明一个 Y 轴，数值轴。
				yAxis: {},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				series: [
					{type: 'bar'},
				]
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart2.setOption(option);
		}

		function initChart3(source) {
			var myChart3 = echarts.init($("#myChart3").get(0));
			// alert("source="+source);
			var option = {
				legend: {},
				title: {
					text: '销售量'
				},
				tooltip: {},
				dataset: {
					// 提供一份数据。
					source: source
				},
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				xAxis: {type: 'category'},
				// 声明一个 Y 轴，数值轴。
				yAxis: {},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				series: [
					{type: 'line'}
				]
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart3.setOption(option);
		}

		function initChart4(source) {
			var myChart4 = echarts.init($("#myChart4").get(0));
			// alert("source="+source);
			var option = {
				title: {
					text: '销售额'
				},
				legend: {},
				tooltip: {},
				dataset: {
					// 提供一份数据。
					source: source
				},
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				xAxis: {type: 'category'},
				// 声明一个 Y 轴，数值轴。
				yAxis: {},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				series: [
					{type: 'line'},
					{type: 'line'}
				]
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart4.setOption(option);
		}
	})


</script>
	</body>
</html>
